<template>
  <view class="detail-view">
    <u-form label-width="140" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="收货人" prop="name">
          <u-input
            type="text"
            v-model="add_form.name"
            placeholder="收货人名称"
          />
        </u-form-item>
        <u-form-item required label="收货地址">
          <u-input
            v-model="area"
            class="dis-input"
            @click="region_show = true"
            disabled
            placeholder="请选择所属区域"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item
          required
          label-position="top"
          label="详细地址"
          prop="address"
        >
          <u-input
            v-model="add_form.address"
            type="textarea"
            placeholder="详细地址,例如楼牌,门号"
          />
        </u-form-item>
        <u-form-item required label="联系电话">
          <u-input
            v-model="add_form.mobile"
            type="number"
            placeholder="填写收货人联系电话"
          />
        </u-form-item>
      </view>
    </u-form>
    <view class="detail-bottom">
      <view class="handel-btn" @click="addSupplier">提交</view>
    </view>
    <RegionSel
      v-model="region_show"
      @confirm="confirm"
      @cancel="region_show = false"
    />
  </view>
</template>

<script>
import RegionSel from "@/components/region/RegionSel.vue";
export default {
  components: {
    RegionSel,
  },
  data() {
    return {
      area: "",
      add_form: {
        name: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        address: "",
        mobile: "",
      },
      region_show: false,
      rules: {
        name: [
          {
            required: true,
            message: "请填写收货人",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
      },
      customerId: "",
    };
  },
  onLoad(options) {
    if (options.customerId) {
      this.customerId = options.customerId;
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    addSupplier() {
      if (
        !this.add_form.name.trim() ||
        !this.area.trim() ||
        !this.add_form.mobile.trim() ||
        !this.add_form.address.trim()
      ) {
        this.$u.toast("必填项不能为空");
        return;
      }
      if (!this.$u.test.mobile(this.add_form.mobile)) {
        this.$u.toast("手机号格式有误，请重新输入!");
        return;
      }
      this.$u.api
        .addShippingAddress({
          name: this.add_form.name,
          mobile: this.add_form.mobile,
          provinceCode: this.add_form.provinceCode,
          cityCode: this.add_form.cityCode,
          districtCode: this.add_form.districtCode,
          address: this.add_form.address,
          defaultStatus: 5,
          customerId: this.customerId,
        })
        .then((res) => {
          this.$u.toast("新增成功");
          setTimeout(() => {
            uni.navigateBack();
          }, 500);
        });
    },
    confirm(val) {
      this.add_form.provinceCode = val[0].value;
      this.add_form.cityCode = val[1].value;
      this.add_form.districtCode = val[2].value;
      let name = "";
      val.forEach((item) => {
        name += item.label;
      });
      this.area = name;
    },
  },
};
</script>

<style lang="scss">
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
